<template>
  <div class="splitpanes__pane relative" :class="{ hiddenSplitter: showFlag === false }" :style="style" @click="onPaneClick($event, _.uid)">
    <slot />
  </div>
</template>

<script>
  export default {
    name: 'VuiPane',
    inject: ['requestUpdate', 'onPaneAdd', 'onPaneRemove', 'onPaneClick'],
    props: {
      showFlag: { type: Boolean, default: null },
      size: { type: [Number, String], default: null },
      minSize: { type: [Number, String], default: 0 },
      maxSize: { type: [Number, String], default: 100 },
    },
    data: () => ({
      style: {},
    }),
    computed: {
      sizeNumber() {
        return this.size || this.size === 0 ? parseFloat(this.size) : null
      },
      minSizeNumber() {
        return parseFloat(this.minSize)
      },
      maxSizeNumber() {
        return parseFloat(this.maxSize)
      },
    },
    watch: {
      sizeNumber(size) {
        this.requestUpdate({ target: this, size })
      },
      minSizeNumber(min) {
        this.requestUpdate({ target: this, min })
      },
      maxSizeNumber(max) {
        this.requestUpdate({ target: this, max })
      },
      showFlag(flag) {
        if (flag) {
          this.onPaneAdd(this)
        } else {
          this.$nextTick(() => {
            this.onPaneRemove(this)
          })
        }
      },
    },
    mounted() {
      if (this.showFlag !== false) {
        // 如果不需要显示当前分割页 则不添加
        this.onPaneAdd(this)
      }
    },
    beforeUnmount() {
      this.onPaneRemove(this)
    },
    methods: {
      // Called from the splitpanes component.
      update(style) {
        this.style = style
      },
    },
  }
</script>
